import React from "react";
import {Modal} from "antd";
import {
    ControlBar,
    CurrentTimeDisplay,
    PlaybackRateMenuButton,
    Player,
    TimeDivider,
    VolumeMenuButton
} from "video-react";
import TextArea from "antd/es/input/TextArea";


interface ModalProps {
    modalVisible: boolean;
    videoData: VideoType.Video;
    onCancel: () => void;
}

const VideoInfoModal: React.FC<ModalProps> = (props) => {
    let {modalVisible, videoData, onCancel} = props

    return (
        <Modal
            destroyOnClose={true}
            title="视频信息"
            visible={modalVisible}
            onCancel={onCancel}
            onOk={onCancel}
            cancelButtonProps={
                {
                    style:{
                        display:"none"
                    }
                }
            }
            okText="确认返回"
        >
            <Player
                autoPlay={false}
                playsInline='false'
                src={videoData.videoUrl}
                fluid={false}
                height={250}
                width="100%"
                poster={videoData.picUrl}
            >
                <ControlBar autoHide={false}>
                    <CurrentTimeDisplay order={4.1}/>
                    <TimeDivider order={4.2}/>
                    <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1}/>
                    <VolumeMenuButton/>
                </ControlBar>
            </Player>
            <TextArea
                style={
                {
                    marginTop:'15px'
                }
            }
                value={videoData.text}
            />
        </Modal>
    )
}
export default VideoInfoModal;